<template>
  <div class="goodinfo">
    <!-- 轮播图 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div
        class="ball"
        v-show="isBall"
      ></div>
    </transition>
    <div>
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item
          class="swipet-item"
          v-for="item in imgUM"
          :key="item.id"
        >
          <img
            :src="item.src"
            alt=""
          >
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 面板 -->
    <van-panel
      :title="goodinfo.title"
      class="van-panel"
    >
      <div>
        <p>
          <span class="new">市场价格：￥{{goodinfo.market_price}}</span>
          <span class="old">销售价格：￥{{goodinfo.sell_price}}</span>
        </p>
        <p>
          <span>购买数量</span>
          <van-stepper
            v-model="value"
            input-width="40px"
            button-size="32px"
          />
        </p>
        <van-button
          class="btn-group"
          type="primary"
          size="small"
        >立即购买</van-button>
        <van-button
          :disabled="isdisabled"
          @click="addCart()"
          type="danger"
          size="small"
        >加入购物车</van-button>
      </div>
    </van-panel>
    <van-panel
      title="商品信息"
      class="van-panel"
    >
      <div>
        <p>
          <span class="new">商品货码：{{goodinfo.goods_no}}</span>
        </p>
        <p>
          库存详情：{{goodinfo.stock_quantity}}
        </p>
        <p>
          上架时间
        </p>
      </div>
    </van-panel>
  </div>
</template>
<script>
export default {
  data: () => ({
    value: 1,
    id: '',
    goodinfo: {},
    isBall: false,
    isdisabled: false,
    imgUM: []
  }),
  created() {
    this.id = this.$route.params.id
    this.getGoodinfo()
    this.getthumimages()
  },
  methods: {
    beforeEnter(el) {
      el.style.transform = 'translate(0,0)'
    },
    enter(el, done) {
      const X = this._getBound().x
      const Y = this._getBound().y
      // eslint-disable-next-line no-unused-expressions
      el.offsetTop
      el.style.transform = `translate(${X}px,${Y}px)`
      el.style.transition = 'all .5s ease'
      done()
    },
    afterEnter() {
      this.isBall = !this.isBall
    },
    _getBound() {
      const info = document.querySelector('.van-info').getBoundingClientRect()
      const ball = document.querySelector('.ball').getBoundingClientRect()
      return {
        x: info.x - ball.x,
        y: info.y - ball.y
      }
    },
    async getGoodinfo() {
      try {
        const { data: { message } } = await this.Api.getGoodinfo(this.id)
        // console.log(message)
        this.goodinfo = message
      } catch (error) {
        console.log('请求失败')
      }
    },
    async getthumimages() {
      try {
        const { data: { message } } = await this.Api.getthumimages(this.id)
        console.log(message)
        this.imgUM = message
      } catch (error) {
        console.log('请求失败')
      }
    },
    addCart() {
      clearTimeout()
      this.isBall = !this.isBall
      this.isdisabled = true
      setTimeout(() => {
        this.isdisabled = false
      }, 600)
    }
  }
}
</script>
<style lang="less" scoped>
.goodinfo{
  padding: 10px;
  .my-swipe{
    border: 1px solid #dddddd;
    border-radius: 5px;
    width: 98%;
    height: 150px;
    margin-bottom: 10px;
    text-align: center;
    .swiper-item{
      width: 100%;
      height: 150px;
      text-align: center;
    }
    img{
      width: 50%;
      height: 100%;
    }
  }
  .van-panel{
    border: 1px solid #dddddd;
    border-radius: 5px;
    width: 100%;
    .van-stepper{
      display: inline-block;
    }
    p{
      margin-left: 12px;
      font-size: 12px;
    }
    .btn-group{
      margin-left: 12px;
      margin-right: 12px;
    }
  }
  .ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: red;
    position: absolute;
    top: 312px;
    left: 119px;
    z-index: 520;
  }
}
</style>
